<template>
  <div class="uploadInvoice">
    <el-dialog
      title="上传发票"
      :visible.sync="isShow"
      center
      width="40%"
      append-to-body
      :before-close="handleClose"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        label-width="100px"
      >
        <el-form-item label="开票金额：" prop="ticketMoney">
          <el-input v-model="form.ticketMoney"></el-input>
        </el-form-item>

        <el-upload
          class="upload-demo"
          ref="upload"
          :auto-upload="false"
          :on-change="handleChange"
          action=""
          :file-list="fileList"
          :http-request="uploadSectionFile"
          :on-remove="handleRemove"
          multiple
          :limit="5"
        >
          <!-- <div slot="tip" class="el-upload__tip">文件不要超过100MB</div> -->
          <el-button slot="trigger" size="medium" type="primary" class="mt20"
            >选择发票文件</el-button
          >
        </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit('ruleForm')">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      isShow: false,
      form: {
        ticketMoney: "",
      },
      rules: {
        ticketMoney: [
          { required: true, message: "请输入开票金额", trigger: "bulr" },
        ],
      },
      baseUrl: global.baseurl,
      fileList: [],
      fileListV: [],
      id: null,
    };
  },
  created() {},
  methods: {
    cancel() {},
    show(data) {
      if (data.drawing) {
        this.id = data.drawing.id;
        this.isShow = true;
        this.form.ticketMoney = Math.abs(data.money);
      } else {
        this.$alert("该笔提现无法上传发票", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {
          },
        });
      }
    },

    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitPost();
        } else {
          return false;
        }
      });
    },
    submitPost() {
      let list = document.getElementsByClassName(
        "el-upload-list__item is-ready"
      );
      if (list.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择需要上传的发票！",
        });
        return;
      }
      // FormData 对象
      var form = new FormData();
      // 文件对象
      for (let i in this.fileListV) {
        form.append(
          i == 0 ? "file" : "file" + (i * 1 + 1),
          this.fileListV[i].raw
        );
      }

      form.append("drawing_coin_ids[0]", this.id);
      form.append("ticketMoney", this.form.ticketMoney);
      axios({
        method: "post",
        url: this.baseUrl + "/api/AgencyDrawingInvoiceRecords",
        data: form,
        headers: {
          "Content-Type": "multipart/form-data",
          Authorization: "Bearer " + this.$store.state.token,
        },
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "上传发票成功成功，请耐心等待结果。",
            });
            this.$emit("refresh");
            this.isShow = false;
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },

    handleClose() {
      this.isShow = false;
      this.$refs["ruleForm"].resetFields();
      this.fileListV = []
      this.fileList = []
    },
    handleChange(file, fileList) {
      let tempList = [];
      for (let i = 0; i < fileList.length; i++) {
        let canUpload = true; //是否可以上传
        let that = this;
        //验证文件类型
        let fileName = fileList[i].name;
        let pos = fileName.lastIndexOf(".");
        let lastName = fileName.substring(pos, fileName.length);

        if (
          lastName.toLowerCase() !== ".jpg" &&
          lastName.toLowerCase() !== ".jpeg" &&
          lastName.toLowerCase() !== ".png" && 
          lastName.toLowerCase() !== ".pdf"
        ) {
          that.$message.error("文件格式只能是jpg/jpeg/png 或者 PDF");
          canUpload = false;
        }
        if (canUpload) {
          tempList.push(fileList[i]);
        }
      }
      this.fileListV.splice(0, this.fileListV.length, ...tempList);
      fileList.splice(0, fileList.length, ...tempList);
      return;
    },
    handleRemove(file, fileList) {
      this.fileListV = fileList;
    },
    uploadSectionFile() {},
  },
};
</script>

<style lang='less' type='text/css'>
.uploadInvoice {
  .el-form {
    .prompt {
      font-size: 12px;
      margin: 0 0 10px 100px;
    }
  }
}
</style>
